<template>
	<view>
		<view class="plate">
			<view class="item" :class="{ active: index === 0 }" @click="handleChange(0)">
				{{ plateNum[0] }}
				<text class="triangle"></text>
			</view>
			<view class="item" :class="{ active: index === 1 }" @click="handleChange(1)">{{ plateNum[1] }}</view>
			<view class="point">●</view>
			<view class="item" :class="{ active: index === 2 }" @click="handleChange(2)">{{ plateNum[2] }}</view>
			<view class="item" :class="{ active: index === 3 }" @click="handleChange(3)">{{ plateNum[3] }}</view>
			<view class="item" :class="{ active: index === 4 }" @click="handleChange(4)">{{ plateNum[4] }}</view>
			<view class="item" :class="{ active: index === 5 }" @click="handleChange(5)">{{ plateNum[5] }}</view>
			<view class="item" :class="{ active: index === 6 }" @click="handleChange(6)">{{ plateNum[6] }}</view>
			<view class="item new-energy" :class="{ active: index === 7 }" @click="handleChange(7)">
				<view v-if="plateNum[7] || plateNum[7] === 0">
					<text>{{ plateNum[7] }}</text>
				</view>
				<uni-icons type="plusempty" size="13" color="#03BE9F" v-else></uni-icons>
			</view>
		</view>
		<view class="popup" v-if="show">
			<section class="panel" :class="{ show: show }">

				<view class="header">
					<view @click="handleReset">重置</view>
					<view @click="show = false">完成</view>
				</view>
				<view class="panelList">
					<view class="item" v-for="(item, idx) of currentDatas" :key="idx">
						<view v-if="item !== ''" :class="{
							disabled: (index == 1 && idx < 10) || (index > 1 && index < 6 && idx > 33),
						}" @click="handleClickKeyBoard(item, idx)">{{ item }}</view>
					</view>
					<view class="item backspace" :class="{ special: index === 0 }" @click="handleDelete">×</view>
				</view>
			</section>
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		computed,
		watchEffect
	} from 'vue'

	const props = defineProps({
		plateNumber: {
			type: Array,
			default: Array.from({
					length: 8,
				},
				v => ''
			),
		},
	})
	const emits = defineEmits(['PlateChange'])

	const plateNum = ref([])
	watchEffect(() => {
		plateNum.value = props.plateNumber

	})
	/* const plateNum = computed(() => {
		return props.plateNumber
	}) */
	const show = ref(false)
	const index = ref(-1)
	const areaDatas = [
		'京',
		'津',
		'渝',
		'沪',
		'冀',
		'晋',
		'辽',
		'吉',
		'黑',
		'苏',
		'浙',
		'皖',
		'闽',
		'赣',
		'鲁',
		'豫',
		'鄂',
		'湘',
		'粤',
		'琼',
		'川',
		'贵',
		'云',
		'陕',
		'甘',
		'青',
		'蒙',
		'桂',
		'宁',
		'新',
		'藏',
		'使',
		'领',
		'',
		'',
		'',
		'',
		'',
		'',
	]
	const characterDatas = [
		0,
		1,
		2,
		3,
		4,
		5,
		6,
		7,
		8,
		9,
		'A',
		'B',
		'C',
		'D',
		'E',
		'F',
		'G',
		'H',
		'J',
		'K',
		'L',
		'M',
		'N',
		'P',
		'Q',
		'R',
		'S',
		'T',
		'U',
		'V',
		'W',
		'X',
		'Y',
		'Z',
		'挂',
		'警',
		'学',
		'港',
		'澳',
	]
	const currentDatas = computed(() => {
		return index.value === 0 ? areaDatas : characterDatas
	})

	const handleChange = idx => {
		index.value = idx
		show.value = true
	}

	const handleClickKeyBoard = (item, idx) => {
		if ((index.value === 1 && idx < 10) || (index.value > 1 && index.value < 6 && idx > 33)) {
			return
		}
		if (index.value < 8) {
			plateNum.value[index.value] = item
			emits('PlateChange', plateNum.value)
		}
		if (index.value < 7) {
			index.value++
		}
	}

	// 重置
	const handleReset = () => {
		index.value = 0
		for (let i = 0; i < 8; i++) {
			plateNum.value[i] = ''
		}
		emits('PlateChange', plateNum.value)
	}

	// 删除
	const handleDelete = () => {
		plateNum.value[index.value] = ''
		emits('PlateChange', plateNum.value)
		if (index.value > 0) {
			index.value--
		}
	}
</script>
<style scoped lang="scss">
	.popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		z-index: 10;
	}

	.plate {
		display: flex;
		justify-content: space-between;
		padding-left: 10rpx;
		padding-right: 10rpx;

		.item {
			width: 64rpx;
			height: 80rpx;
			background: #EFF6FE;
			border-radius: 8rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 32rpx;
			color: rgba(0, 0, 0, 0.9);
			font-weight: bold;
			position: relative;
			// border: 2rpx solid rgba(207, 214, 230, 1);

			&.active {
				background-color: #bbbbbb;
			}
		}

		.new-energy {
			box-sizing: border-box;
			border: 2rpx dashed #03be9f;
			font-weight: bold;

			uni-icons {
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.point {
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			color: #bdc4cc;
			font-size: 18rpx;
		}

		.triangle {
			width: 0;
			height: 0;
			border: 6rpx solid transparent;
			border-right-color: #00c69d;
			border-bottom-color: #00c69d;
			border-radius: 1rpx 2rpx 1rpx;
			position: absolute;
			right: 6rpx;
			bottom: 6rpx;
		}
	}

	.panel {
		position: fixed;
		left: 0;
		width: 100%;
		bottom: 0;
		z-index: 999;
		box-sizing: border-box;
		background-color: #f5f5f5;
		transition: all 0.3s ease;
		transform: translateY(100%);

		&.show {
			transform: translateX(0);
		}

		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 24rpx;
			height: 96rpx;
			color: #2080f7;
			font-size: 34rpx;
		}

		.panelList {
			padding: 0 19rpx 20rpx;

			.item {
				display: inline-block;
				width: 68rpx;
				height: 80rpx;
				margin-right: 8rpx;
				margin-bottom: 8rpx;
				vertical-align: top;

				view {
					width: 100%;
					height: 84rpx;
					line-height: 84rpx;
					border-radius: 6rpx;
					background: #fefffe;
					font-size: 32rpx;
					color: rgba(0, 0, 0, 0.9);
					font-weight: bold;
					text-align: center;

					&.disabled {
						background-color: rgba(254, 255, 254, 0.6);
						color: rgba(0, 0, 0, 0.23);
					}
				}

				&:nth-of-type(10n) {
					margin-right: 0;
				}
			}

			.backspace {
				vertical-align: top;
				font-size: 48rpx;
				font-weight: bold;
				text-align: center;
				height: 84rpx;
				line-height: 84rpx;
				border-radius: 6rpx;
				background: #fefffe;
				color: rgba(0, 0, 0, 0.9);
			}
		}
	}
</style>